<template>
  <div>
    <div class="my_page">
      <topView :isView="isView" :topSet="topSet"></topView>
      <!-- 饼图、柱状和折线 -->
      <viewChart :isView="isView" :viewSet="viewSet"></viewChart>
      <!-- 饼图和表格 -->
      <tableChart :isView="isView" :tableSet="tableSet"></tableChart>
      <!-- 悬浮按钮 -->
      <el-button type="primary" icon="el-icon-plus" circle class="float_but" v-permission="'GLSZ_ADD'" @click="toSet(1)" v-if="isView"></el-button>
      <el-button type="primary" icon="el-icon-minus" circle class="float_but" v-permission="'GLSZ_ADD'" @click="toSet(2)" v-else></el-button>
    </div>
    <!-- <div class="no_config" v-else>
        <el-button type="primary" icon="el-icon-plus" circle class="float_but" @click="toSet(1)"
            v-if="isView"></el-button>
    </div> -->
  </div>
</template>

<script>
  import * as echarts from "echarts"
  import charts from "@/views//chart/chart.js"
  import topView from "@/views/newSystem/projectOverview/topView.vue"
  import tableChart from "@/views/newSystem/projectOverview/tableChart.vue"
  import viewChart from "@/views/newSystem/projectOverview/viewChart.vue"

  export default {
    components: {
      topView,
      tableChart,
      viewChart
    },
    data() {
      return {
        isView: true, //视图还是配置
        isConfig: true, //是否已经配置
        isInitial: false,//是否初始化
        tableData: [],
        topSet: {},
        viewSet: {},
        tableSet: {}
      }
    },
    created() {

    },
    mounted() {
    },
    methods: {
      toSet(type) {
        this.isView = type == 1 ? false : true
      }
    }
  }
</script>
<style scoped lang="scss">
  .my_page {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 50px);
    padding: 20px;
    position: relative;
  }

  .no_config {
    width: 100%;
    height: calc(100vh - 50px);
    background-image: url('../../../../assets/img/no_config.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
  }

  .float_but {
    position: absolute;
    bottom: 40px;
    right: 40px;
    z-index: 299;
  }
</style>
